/*
* @Author: Choisaaaa
* @Date: 2018/5/4  19:53
* 商品详情页
*/

import React from "react";

import "./product-save.scss";
import Footer from "component/footer/footer.jsx"
import PageTitle from 'component/page-title/page-title.jsx';
import CategorySelector from './category-selector.jsx';//商品种类下拉框子组件
import MUtil from 'util/mm.jsx';
import Product from 'service/product-service.jsx'

const _product = new Product();
const _mm = new MUtil();

class ProductDetail extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            id :  this.props.match.params.pid,  //商品ID
            name : "",                          //商品名称:通过方法 1 保存
            subtitle : "",                      //商品子标题:通过方法 1 保存
            categoryId : 0,                     //商品所属一级种类ID:通过方法 2 保存
            parentCategoryId : 0,               //商品所属二级种类ID:通过方法 2 保存
            price : "",                         //价格:通过方法 1 保存
            stock : "",                         //库存:通过方法 1 保存
            subImages : [],                     //商品图片:通过方法 3 保存
            detail : ""  ,                      //富文本控价输入的字段:通过方法 6 保存
            status : 1                          //商品状态1为在售
        };
    }
    componentDidMount(){
        this.loadProductList();
    }
    componentWillMount(){//组件将要加载
        this.mounted = true;
    }
    componentWillUnmount(){//组件销毁
        this.mounted = false;
    }
    loadProductList(){//编辑商品时信息回填
        if(this.state.id){
            _product.getProduct(this.state.id).then((res)=>{
                let images = res.subImgsAddr.split(",");
                res.subImages = images.map((imgUri) =>{
                    return{
                        uri: imgUri,
                        url: res.imageHost + imgUri
                    }
                });
                if(this.mounted){
                    this.setState(res);
                }
            },(errMsg)=>{
                _mm.errorTips(errMsg)
            });
        }

    }

    render(){
        return (
            <div id="page-wrapper">
                <PageTitle title="商品详情"/>
                <div className="form-horizontal">
                    <div className="form-group">
                        <label className="col-md-2 control-label">商品名称</label>
                        <div className="col-md-5">
                            <input type="text" className="form-control"
                                   readOnly
                                   value={this.state.productName||""}/>
                        </div>
                    </div>
                    <div className="form-group">
                        <label className="col-md-2 control-label">商品描述</label>
                        <div className="col-md-5">
                            <input type="text" className="form-control"
                                   readOnly
                                   value={this.state.productSubtitle ||""}/>
                        </div>
                    </div>
                    <div className="form-group">
                        <label className="col-md-2 control-label">所属分类</label>
                        <CategorySelector
                            readOnly
                            categoryId={this.state.categoryId}
                            parentCategoryId={this.state.parentCategoryId}
                            onCategoryChange = {(categoryId, parentCategoryId) => this.onCategoryChange(categoryId, parentCategoryId)} />
                    </div>
                    <div className="form-group">
                        <label className="col-md-2 control-label">商品原价</label>
                        <div className="col-md-3">
                            <div className="input-group">
                                <input type="number" className="form-control"
                                       value={this.state.normalPrice||""}
                                       readOnly/>
                                <span className="input-group-addon">元</span>
                            </div>
                        </div>
                    </div>
                    <div className="form-group">
                        <label className="col-md-2 control-label">商品售价</label>
                        <div className="col-md-3">
                            <div className="input-group">
                                <input type="number" className="form-control"
                                       value={this.state.promotionPrice||""}
                                       readOnly/>
                                <span className="input-group-addon">元</span>
                            </div>
                        </div>
                    </div>
                    <div className="form-group">
                        <label className="col-md-2 control-label">商品库存</label>
                        <div className="col-md-3">
                            <div className="input-group">
                                <input type="number" className="form-control"
                                       value={this.state.productStock||""}
                                       readOnly/>
                                <span className="input-group-addon">件</span>
                            </div>

                        </div>
                    </div>
                    <div className="form-group">
                        <label className="col-md-2 control-label">商品图片</label>
                        <div className="col-md-10">
                            {
                                this.state.subImages.length
                                    ? this.state.subImages.map((image,index) =>
                                    (<div className="img-con" key={index}>
                                        <img src={image.url} alt="商品图片" className="img"/>
                                    </div>)
                                )  : (<div className="choose-img">暂无图片</div>)
                            }
                        </div>
                    </div>
                    <div className="form-group">
                        <label className="col-md-2 control-label">商品详情</label>
                        <div className="col-md-9 product-detail" dangerouslySetInnerHTML={{__html: this.state.productDesc}}>
                        </div>
                    </div>
                </div>
                <Footer/>
            </div>
        );
    }
}

export default ProductDetail;